/** Copyright 2020 Tianshu AI Platform. All Rights Reserved. * * Licensed under the Apache License,
Version 2.0 (the "License"); * you may not use this file except in compliance with the License. *
You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
required by applicable law or agreed to in writing, software * distributed under the License is
distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. * See the License for the specific language governing permissions and * limitations under
the License. * ============================================================= */

<template>
  <div class="el-statistic">
    <div v-if="title" class="el-statistic-title">{{ title }}</div>
    <div class="el-statistic-content">
      <span class="el-statistic-content-value">{{ value }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Statistic',
  props: {
    title: String,
    value: [String, Number],
  },
};
</script>
<style lang="scss" scoped>
.el-statistic-title {
  margin-bottom: 4px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.el-statistic-content {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.85);
}

.el-statistic-content-value {
  display: inline-block;
  direction: ltr;
}
</style>
